<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input v-model.trim="keyword" type="text">
    <!-- 方案一   -->
<!--    <p v-show="item.includes(keyword) && keyword" v-for="(item,index) in arr" :key="index">{{item}}</p>-->

    <!--  计算属性 -->
<!--    <p  v-for="(item,index) in searchArr" :key="index">{{item}}</p>-->


    <p  v-for="(item,index) in searchArr" :key="index">{{item}}</p>


</div>
</body>
<script>
	new Vue({
		el:"#root",
        data:{
			keyword:"",
            searchArr:[],
			arr:["zhangsan","lisi","wangwu","zhaoliu","yanqi","shenba","qianshi","xiaoshiyi"]
        },
        watch:{
		    keyword(){
				this.searchArr = this.arr.filter(v=>this.keyword && v.includes(this.keyword));
            }
        },
        computed:{
			// searchArr(){
			// 	return this.keyword && this.arr.filter(v=>v.includes(this.keyword))
            // }
        }
	})
</script>
</html>